<template>
  <view>
    <view class="content-view">
      <view class="sign" v-if="list.length>0">
        <view class="sign-info" @click="readStatus(1)">
          <text>全部已读</text>
          <image class="all-read" src="../../static/allRead.png" mode=""></image>
        </view>
        <view class="line"></view>
        <view class="sign-info" @click="readStatus(-1)">
          <text>删除已读</text>
          <image class="delete-read" src="../../static/deleteRead.png" mode=""></image>
        </view>
      </view>
      <uni-card v-for="item in list" :key="item.id" :border="false">
        <!-- 0：未读 1：已读 -1：删除 -->
        <view v-if="item.status == 0" @click="messageDetails(item)" @longtap="longtaps(item.id)">
          <image class="ing" src="../../static/system.png" mode=""></image>
          <view class="ing-info">
            <view class="ing-title">{{item.title}}</view>
            <view class="ingtime">{{item.createTime || ''}}</view>
          </view>
          <view class="adress">
            {{item.content}}
          </view>
        </view>
        <view v-else class="mask" @click="messageDetails(item)" @longtap="longtaps(item.id)">
          <image class="ing" src="../../static/system.png" mode=""></image>
          <view class="ing-info">
            <view class="ing-title">{{item.title}}</view>
            <view class="ingtime">{{item.createTime}}</view>
          </view>
          <view class="adress">
            {{item.content}}
          </view>
        </view>
      </uni-card>
      <view v-show="isLoadMore && list.length >0">
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>

      <view class="nodata" v-if="list.length == 0">
        <image class="empty_img" src="/static/empty.png" mode="widthFix"></image>
        <view>没有你想要的内容</view>
      </view>
    </view>
    <tabBar :current="1"></tabBar>
  </view>
</template>

<script>
  import moment from '../../components/moment.js';
  import tabBar from "@/components/tabBar.vue";

  import {
    messageMsg
  } from '@/api/equip.js'
  export default {
    components:{
      tabBar:tabBar
    },
    data() {
      return {
        form: {
          pageNumber: 0,
          pageSize: 10
        },
        list: [],
        more: '',
        page: 1, //页码
        size: '10',
        loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
        isLoadMore: false, //是否加载中
        refresh: false, // 下拉刷新标示
      }
    },
    
    onShow() {
      // uni.hideTabBar();
      this.getDataList();
    },

    // 刷新
    onPullDownRefresh() {
      this.page = 1;
      this.getDataList();
      this.refresh = true;
    },
    onReachBottom() {
      if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
        this.isLoadMore = true;
        this.page++;
        this.getDataList();
      }
    },
    methods: {
      getDataList() {
        this.$Toast.loading('加载中');
        messageMsg('/selectMessageUserList', 'get', {
          pageNum: this.page,
          pageSize: this.size,
        }).then(res => {
          let datas = res.data.records;
          this.list = this.page == 1 ? datas : this.list.concat(datas);
          if (datas.length < this.size) { //小于size数，停止请求
            this.isLoadMore = true;
            this.loadStatus = 'nomore';
          } else {
            this.isLoadMore = false;
          }
          uni.hideLoading();
          if (this.refresh) {
            uni.stopPullDownRefresh();
            this.refresh = false;
          }
        }).catch(error => {
          uni.hideLoading();
          this.isLoadMore = false;
        })
      },
      messageDetails(item) {
        uni.navigateTo({
          url: '../messageDetails/messageDetails?detail=' + encodeURIComponent(JSON.stringify(item))
        })
      },
      readOperate(status) {
        // status : 1 已读，-1:  删除
        let ids = this.list.map(item => {
          return item.id;
        });
        messageMsg(`/updateStatusBatch?Ids=${ids}&status=${status}`, 'put').then(res => {
            if (res.code == 200) {
              this.$Toast.success('操作成功');
              setTimeout(() => {
                this.page = 1;
                this.getDataList();
              }, 1500)
            }
          })
          .catch(err => {

          })
      },
      readStatus(status) {
        // status : 1 已读，-1:  删除
        let msg = status == 1 ? '全部已读' : '删除已读';
        let that = this;
        uni.showModal({
          title: '提示',
          content: `是否${msg}`,
          success(res) {
            if (res.confirm) {
              if(status == 1){
              that.readOperate(status);
              }
              else if(status == -1){
                that.deleteOperate();
              }
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
      // 删除已读
      deleteOperate(){
        this.$Toast.loading('操作中');
        messageMsg('/updateStatus','put').then(res=>{
          this.$Toast.success('删除已读成功');
          setTimeout(()=>{
            this.page = 1;
            this.getDataList();
          },1500)
        });
      },
      longtaps(id) {
        let that = this;
        let ids = [id];
        uni.showModal({
          title: '提示',
          content: '是否确定删除该条消息？',
          success: function(res) {
            if (res.confirm) {
              messageMsg(`/updateStatusBatch?Ids=${ids}&status=-1`, 'put').then(res => {
                  if (res.code == 200) {
                    that.$Toast.success('删除成功');
                    setTimeout(()=>{
                      that.page = 1;
                      that.getDataList();
                    },1500)
                  }
                })
                .catch(err => {

                })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/main.scss';

  page {
    background-color: #f7f7f7;
  }

  .sign {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 28upx;
    color: #3a3a3a;

    .sign-info {
      display: flex;
      align-items: center;
    }

    .line {
      width: 1upx;
      height: 28upx;
      background-color: #cfcfcf;
      margin: 0 30upx;
    }

    .all-read {
      width: 26upx;
      height: 27upx;
      margin-left: 10upx;
    }

    .delete-read {
      width: 25upx;
      height: 27upx;
      margin-left: 10upx;
    }
  }

  .mask {
    opacity: 0.5;
  }

  .ing {
    width: 60upx;
    height: 50upx;
    position: absolute;
    left: 0;
    top: 0;
  }

  .ing-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ing-title {
      font-size: 34upx;
      color: #3a3a3a;
      font-weight: bold;
      padding: 10upx 0 0 50upx;
      width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .ingtime {
      font-size: 26upx;
      color: #bdbdbd;
    }
  }

  .adress {
    font-size: 26upx;
    color: #656565;
    margin-top: 30upx;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .tips {
    margin-top: 30upx;
    font-size: 24upx;
    color: #bdbdbd;
  }

  .tips2 {
    margin-top: 20upx;
    font-size: 24upx;
    color: #4ea7ff;
  }
  .content-view{
    padding-bottom: 160rpx;
  }
</style>
